<template>
  <!-- <div class="grid" ref="scroll">
    <div>
        <van-grid :border="false" :column-num="3" >
  <van-grid-item v-for="(item,index) in gridList" :key="index" @click="goDetail(item.id)" >
    <van-image :src="item.imgUrl" />
  </van-grid-item>
</van-grid>
    </div>

  </div> -->
  <div class="horizontal-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div class="scroll-item" v-for="(item, index) in gridList" :key="index" @click="goDetail(item.id)"><img class="imgss" :src="item.imgUrl" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
export default {
    props:{
        gridList:Array
    },
    mounted(){
        this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
    methods:{
        goDetail(id) {
            this.$router.push({
                path:'/detail',
                query:{
                    id
                }
            })
        },
        init() {
            this.bs = new BetterScroll(this.$refs.scroll, {
                scrollX:true,
                probeType:3
            })
        }
    }
}
</script>

<style scoped>
.imgss {
    width: 114px;
    height: 114px;
}

.scroll-wrapper {
  position: relative;
  width: 100%;
  white-space: nowrap;
  border-radius: 5px;
  overflow: hidden
}

.scroll-content {
  display: inline-block
}

.scroll-item {
  border-radius: 10px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  
}

.h2 {
  width: 160px;
  height: 200px;
  overflow: hidden;
}

.h2 .img:hover {
    transform: scale(2,2);
  }
</style>